<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${ctx}/statics/less/secondPage.css">
    <title>三阶</title>
</head>
<body>
<section class="thirdPage">

</section>

<script>
    layui.use(['layer','util'], function () {
        let layer = layui.layer;
        let util = layui.util;
        let domArr = [];
        let html = '';
        for (let i = 0; i < 12; i++) {
            html += '<div class="module" id="chart'+i+'"></div>';
            domArr.push('chart'+i);
        }
        $('.thirdPage').empty();
        $('.thirdPage').append(html);

        function charts(elm, title){
            let myChart = echarts.init(document.getElementById(elm),'jyt-dark');
            let option = {
                title: {
                    text: title,
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'normal'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    top: '8%',
                    itemWidth: 15,
                    itemHeight: 8,
                    textStyle: {
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '水量',
                        nameGap: 10,
                        min: 0,
                        max: 250,
                        interval: 50
                    },
                    {
                        type: 'value',
                        name: '温度',
                        nameGap: 10,
                        min: 0,
                        max: 25,
                        interval: 5
                    }
                ],
                series: [
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '平均温度',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        if(domArr.length > 0){
            domArr.forEach((item,index)=>{
                charts(item, 'FQC每天产量AC02'+util.digit(index, 2));
            })
        }

        $('.thirdPage').on('click', function () {
            layer.open({
                type: 2,
                title: '四阶页面',
                shadeClose: false,
                shade: 0.2,
                area: ['80%', '80%'],
                maxmin: true,
                content: ['/iframePages/fourthPage.do', 'no'],
            });
        });
    })
</script>
</body>
</html>
